<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">

<head lang="en">
    <meta charset="UTF-8">
    <title>日志管理</title>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-datetimepicker.css" th:href="@{/assert/css/bootstrap-datetimepicker.css}"/>
    <link rel="stylesheet" href="../../../assert/css/style.css" th:href="@{/assert/css/style.css}"/>
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>
    <link rel="stylesheet" href="../../../assert/css/common.css" th:href="@{/assert/css/common.css}"/>
</head>
<body class="laydate_body">
<div class="wrapper wrapper-content">
    <div class="ibox">
    <!--<div class="con-title">-->
        <!--<h4>操作日志</h4>-->
    <!--</div>-->
    <div class="resourceCon">
        <div class="con-operation clearfix">
            <div class="cquery  clearfix">
                <div class="search_group">
                    <div class="control-inline">
                        <div class="querySearch">
                            <input id="userNameSearch" class="form-control" type="text" placeholder="请输入用户名"/>
                            <input id="resourceNameSearch" class="form-control" type="text" placeholder="请输入资源名称"/>
                        </div>
                    </div>
                </div>
                <div class="search_group">
                    <div class="times">
                    <div class="startTime">
                        <label class="control-label">开始时间:</label>
                        <div class="control-inline">
                        <div class='input-group date' >
                            <input type='text' class="form-control" id='dateStart'/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                               </span>
                        </div>
                        </div>
                    </div>
                    <div class="endTime">
                        <label class="control-label">结束时间:</label>
                        <div class="control-inline">
                            <div class='input-group date' >
                                <input type='text' class="form-control" id='dateEnd'/>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="search_group">
                    <button id="searchBtn" type="button" class="querybtn btn btn-danger">查询</button>
                    <button id="reset" type="reset" class="btn  btn-default">重置</button>
                </div>
            </div>
            </div>
        </div>
        <table id="logTable"></table>
    </div>
</div>
</div>
<a id="basePath" th:href="@{/}"></a>
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<!--<script src="../../../assert/js/bootstrap-table.js" th:src="@{/assert/js/bootstrap-table.js}"></script>-->
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/moment-with-locales.js" th:src="@{/assert/js/moment-with-locales.js}"></script>
<script src="../../../assert/js/bootstrap-datetimepicker.js" th:src="@{/assert/js/bootstrap-datetimepicker.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script type="text/javascript">
    //项目名称
    var basePath = $("#basePath").attr("href");
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#logTable').bootstrapTable({
                url: basePath + "rest/systemManager/operateLogByPage", //请求后台的URL（*）
                method: "post", //请求方式（*）
                dataType: "json",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                dataField: "rows", //服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
                totalField: "total",
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortName: "id", //排序方式
                sortOrder: "desc", //排序方式
                clickToSelect: true,
                queryParams: oTableInit.queryParams, //传递参数（*）
                queryParamsType: "", //  queryParamsType = 'limit' 参数: limit, offset, search, sort, order;
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 15, 20, 25], //可供选择的每页的行数（*）
                idField: "id",
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                columns: [
                    {
                        field: 'username',
                        title: '登录名',
                        sortable: true
                    },
                    {
                        field: 'realname',
                        title: '真实姓名',
                        sortable: true
                    },
                    {
                        field: 'resourcename',
                        title: '操作资源',
                        sortable: true
                    },
                    {
                        field: 'content',
                        title: '操作内容',
                        sortable: true
                    },
                    {
                        field: 'opttime',
                        title: '操作时间',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if (value != null) {
                                // 把时间戳修改为yyyy-mm-dd HH:mm:ss格式
                                var date = new Date(value);
                                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                                var hour = date.getHours();
                                var minute = date.getMinutes()< 10 ? "0" + date.getMinutes() : date.getMinutes();
                                var second = date.getSeconds()< 10 ? "0" + date.getSeconds() : date.getSeconds();
                                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute + ":" + second;
                            }
                        }
                    }
                ],
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () { //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadSuccess: function (data) {  //加载成功时执行
                    resize.me();
                },
                onLoadError: function (data) {
                    $('#logTable').bootstrapTable('removeAll');
                },
                responseHandler: function (res) {
                    return {
                        total: res.totalCount,
                        rows: res.result
                    };
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                "pageSize": params.pageSize,
                "pageNum": params.pageNumber,
                "sortName": this.sortName,
                "sortOrder": this.sortOrder,
                "userName": $("#userNameSearch").val(),
                "resourceName": $("#resourceNameSearch").val(),
                "dateStart": $("#dateStart").val(),
                "dateEnd": $("#dateEnd").val()
            };
            return temp;
        };
        return oTableInit;
    };

    // 基础功能
    var baseFun = {
        init: function () {
            baseFun.search();
            baseFun.reset();
        },
        // 点击搜索时表格重新加载
        search: function () {
            $("#searchBtn").off("click").on("click", function () {
                $("#logTable").bootstrapTable('refreshOptions', {pageNumber:1});
                $("#logTable").bootstrapTable('refresh');
            });
            $("body").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    //此处编写用户敲回车后的代码
                    $("#logTable").bootstrapTable('refreshOptions', {pageNumber:1});
                    $("#logTable").bootstrapTable('refresh');
                }
            })
        },
        reset:function(){
            $("#reset").on("click", function () {
                bs.resetSearch($(".cquery"));
                $("#logTable").bootstrapTable('refreshOptions', {pageNumber:1});
                $("#logTable").bootstrapTable('refresh');
            })
        }
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".ibox").width(winW - 20);
            $(".ibox").height(winH - 20);
            bs.autoTableHeight($('#logTable'),winH -$(".cquery").height()-22-$(".obtns").height())
        }
    };


    $(function () {
        //时间控件
        $("#dateStart").datetimepicker({locale: 'zh-cn', viewMode: 'days', format: 'YYYY-MM-DD HH:mm'});
        $('#dateEnd').datetimepicker({locale: 'zh-cn', viewMode: 'days', format: 'YYYY-MM-DD HH:mm'});
        $("#dateStart").on("dp.change",function (e) {
            $('#dateEnd').data("DateTimePicker").minDate(e.date);
        });
        $("#dateEnd").on("dp.change",function (e) {
            $('#dateStart').data("DateTimePicker").maxDate(e.date);
        });

        // 表格初始化
        var oTable = new TableInit();
        oTable.Init();
        baseFun.init();
        resize.init();
    });
</script>
</body>

</html>